import React, { useContext } from 'react'

import {
  colorContext,
  fontContext
} from './myContext'

export default function ChildContext() {
  const colorCtx = useContext(colorContext)
  const fontCtx = useContext(fontContext)
  return (
    <div>
      {colorCtx.color} <br/>
      {fontCtx.font}
      {/* <colorContext.Consumer>
        {
          (value) => {
            return (
              <>
                <div>{value.color}</div>
                <fontContext.Consumer>
                {
                  (value2) => {
                    return <div>{value2.font}</div>
                  }
                }
              </fontContext.Consumer>
              </>
            )
          }
        }
      </colorContext.Consumer> */}
    </div>
  )
}
